<template>
	<view style="padding: 10vmin;">
		<view class="box-border flex-center" style="height: calc(100vh - 20vmin);width: 100%;flex-direction: column;">
			<!-- 顶部卡片 -->
			<view style="width: 100%;flex: 2.5;" class=" flex-center">
				<!-- 左侧的时间 -->
				<view style="height: 100%; flex: 1;flex-direction: column;"
					class="box-radius-0_5 box-m-1 flex-center font-3 box-bgStyle-1">
					{{dateComputed.time}}
					<view class="opacity-0_6">
						{{dateComputed.date}}
					</view>
				</view>
				<!-- 天气预报 -->
				<view style="height: 100%; flex: 3;" class=" box-radius-0_5 box-m-1 flex-center box-bgStyle-1">
					<view style="height: 100%; flex: 3;justify-content: start;position: relative;" class=" flex-center">
						<u-image src="/static/images/cloudy.png" style="height: 100%;width: 30%;" mode="aspectFit">
						</u-image>
						<view class="flex-center"
							style="flex-direction: column;align-items: flex-start;margin-left: 2vmax;">
							<view style="font-weight: bold;">{{weatherData.area}}</view>
							<view class="opacity-0_6" style="margin-top: 1vmax;">温度:{{weatherData.intervalTemperature}}℃
							</view>
						</view>
						<view
							style="width: 0.5vmin;height: 3vmax;position: absolute;right: 0px;background-color: #CCC;">
						</view>
					</view>
					<view style="height: 100%;flex: 2;flex-direction: column;align-items: flex-start;"
						class="flex-center">
						<view v-for="(item,index) in weatherComputed"
							style="display: block;margin-left: 3vmax;line-height: 2vmax;opacity: 0.3;">
							{{item}}
						</view>
					</view>
				</view>
				<!-- 空调状态 -->
				<view style="height: 100%; flex: 1;" class=" box-radius-0_5 box-m-1"></view>
			</view>
			<!-- 下面的选项卡片 -->
			<view style="width: 100%;flex: 5;" class=" flex-center">
				<view class="flex-center" style="flex: 1;">
					<audio-card></audio-card>
				</view>

				<view class="flex-center" style="flex: 3;">
					<view style="width: 100%;height: 18vmax;margin-left: 2vmax;margin-right: 2vmax;" class="box-bgStyle-1"></view>
				</view>
				<view style="flex: 1;"></view>
			</view>

		</view>
		<bottomNav></bottomNav>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: null
				, timeUpdateTask: null
				, weatherData: {
					area: ''
					, intervalTemperature: ''
				}
			}
		}
		, methods: {
			OnCickPlay() {}
		}
		, computed: {
			dateComputed() {
				let hour = this.date.getHours();
				let minute = this.date.getMinutes();
				return {
					time: `${hour}:${minute}`
					, date: `${this.date.getUTCFullYear()}-${this.date.getUTCMonth()+1}-${this.date.getUTCDate()}`
				}
			}
			, weatherComputed() {
				if (this.weatherData.weatherDescription == null) return [];

				return this.weatherData.weatherDescription.split('，');
			}
		}
		, onLoad() {
			this.$u.vuex('pageIndex', 0)
			this.date = new Date(Date.now());
			// setTimeout(()=>{},1000)
			this.timeUpdateTask = setInterval(() => {
				this.date = new Date(Date.now())
			}, 1000);

			this.$u.api.get_weather("大连市").then(res => {
				// console.log(res);
				this.weatherData = res.data;
			})

		}
		, onUnload() {
			clearInterval(this.timeUpdateTask)
		}
	}
</script>

<style>

</style>
